<template>
  <el-card class="box-card">
    <formcon @onSubmit="onSubmit" @onAdd="onAdd" />
    <el-table v-loading="listLoading" :data="dataList" stripe border row-key="id"  :ref="multipleTable"
    @selection-change="handleSelectionChange">
      <el-table-column label="序号" align="center" type="selection" width="50" />
      <el-table-column label="序号" align="center" type="index" width="50" />
      <el-table-column label="昵称" align="center" prop="nickName"> </el-table-column>
      <el-table-column label="医院" align="center" prop="hospitalName" />
      <el-table-column label="分数" align="center" prop="grade" />
      <el-table-column label="证书" align="center" prop="certificateName" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <!-- <el-button type="text">
            <span v-if="row.publishState === 1" @click="handleState(row)">发布</span>
          </el-button>
          <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button> -->
           <div v-if="row.publishState === 1">
            <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" @click="handlepub(row)" >发布</el-button>
          <!-- <el-button type="text" @click="handleSubmit(row)" >取消发布</el-button> -->
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </div>
          <div v-else>
                <el-button type="text" @click="handleSubmit(row)" >取消发布</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <el-button type="primary" @click="handlepub()">发布分数</el-button>
    </div>

    <el-dialog
      :title="type === 'edit' ? '决赛得分编辑' : '皮肤病大赛 - 决赛得分新建'"
      :visible.sync="modalVisible"
      width="480px"
      @close="onCancel"
      append-to-body
    >
      <el-form
        label-width="90px"
        ref="modalForm"
        label-position="left"
        :model="modalForm"
        :rules="rules"
      >
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="modalForm.nickName"></el-input>
        </el-form-item>
        <el-form-item label="医院" prop="hospitalName">
          <el-input v-model="modalForm.hospitalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="modalForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="分数" prop="grade">
          <el-input v-model="modalForm.grade"></el-input>
        </el-form-item>
        <el-form-item label="证书" prop="certificateId">
          <el-select v-model="modalForm.certificateId">
            <el-option
              v-for="item of certificateList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import formcon from './../form/form.vue'
import apis from '@/api/skinDisease/final/finalApis.js'

export default {
  name: 'index',
  components: {
    formcon
  },
  data() {
    return {
      dataList: [],
      listLoading: false,
      list: {},
      pageNum: 1,
      pageSize: 10,
      type: 'add',
      formRef: undefined,
      modalVisible: false,
      certificateList: [],
      modalForm: {
        nickName: '',
        hospitalName: '',
        grade: '',
        phone: '',
        certificateId: ''
      },
      rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        grade: [{ required: true, message: '请输入分数', trigger: 'blur' }],
        certificateId: [{ required: true, message: '请选择证书', trigger: 'blur' }]
      },
      multipleSelection: []
    }
  },
  methods: {
     handleSelectionChange(val){
        console.log(val)
         this.multipleSelection = val;
     },
    handlepub(){
           apis.flRelScore( this.multipleSelection)
         .then((res)=>{
           console.log(res)
         })
    },
    
    // 编辑弹窗
    handleUpdate(data) {
      this.type = 'edit'
      this.modalVisible = true
      this.modalForm = {
        ...this.modalForm,
        id: data.id,
        nickName: data.nickName,
        hospitalName: data.hospitalName,
        phone: data.phone,
        grade: data.grade,
        certificateId: data.certificateId,
        certificateName: data.certificateName
      }
    },
    onCancel() {
      this.modalVisible = false
      this.modalForm = {}
      this.resetForm('modalForm')
    },
    handleDelete(row) {
      console.log('row', row)
      apis.flParDel(row.id).then(() => {
        this.$message.success('删除成功')
        this.getFirList()
      })
    },
    getCertificateList() {
      apis.getCertificateList().then(res => {
        this.certificateList = res.data
      })
    },
    getFirList(params = {}) {
      let temp = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...params
      }
      apis.flParList(temp).then(res => {
        console.log(res)
        this.dataList = res.data.records
      })
    },
    onSubmit(data) {
      this.getFirList({ conditions: { nickName: data.hosphital } })
    },
    onAdd() {
      this.type = 'add'
      this.modalVisible = true
    },
    onSave() {
      this.modalVisible = false
      if (this.type === 'edit') {
        apis
          .flParEdit(this.modalForm)
          .then(() => {
            this.$message.success('修改成功')
            this.modalForm = {}
            this.getFirList()
          })
          .catch(err => {
            this.$message.error('修改失败：' + err.message)
          })
      } else {
        apis
          .flParAdd(this.modalForm)
          .then(() => {
            this.$message.success('添加成功')
            this.modalForm = {}
            this.getFirList()
          })
          .catch(err => {
            console.log('err', err)
            this.$message.error('添加失败：' + err.message)
          })
      }
    }
  },
  mounted() {
    this.getFirList()
    this.getCertificateList()
  }
}
</script>

<style lang="scss" scoped>
.address {
  .address-item {
    display: flex;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    .btn {
      flex-shrink: 0;
      width: 44px;
      height: 32px;
    }
  }
}

.footer {
  margin-top: 30px;
}
</style>
